<template>
  <div class="floor-layout tpl-67">
    <div class="layout-main"
      :class="data.blockClass"
      :style="`padding-left:${data.blockStyle.pagePadding}px;
      padding-right:${data.blockStyle.pagePadding}px;
      margin-left:-${data.blockStyle.proPadding/2}px;
      margin-right:-${data.blockStyle.proPadding/2}px;`">
      <div v-for="(block, index) in data.blockList"
        :key="index"
        class="layout_item_box"
        :style="`padding:${data.blockStyle.proPadding/2}px;`">
        <layout-item
          :block="block"
          @handle-edit="handleEditBlock(index)">
          <template slot-scope="{ block }">
            <div v-if="block.block_value"
              class="goods_item"
              :style="`border-radius:${data.blockStyle.proRadius}px`">
              <div class="goods_pic">
                <div class="goods_pic_wrap" :style="`padding-top:${data.blockStyle.imgPercent}%;`">
                  <div class="goods_pic_img" :style="`background-image: url(${block.block_value.goods_image});`"></div>
                </div>
                <div v-if="data.blockClass!=='row_three'" class="goods_tag">
                  <span v-if="data.blockClass==='row_one'||data.blockClass==='row_hybrid'" class="goods_tag_title">秒杀</span>
                  <div class="goods_tag_countdown">
                    <span class="goods_tag_countdown_text">距结束</span>
                    <div class="goods_countdown">
                      <span class="goods_countdown_hour">00</span><span
                      class="goods_countdown_text">:</span><span
                      class="goods_countdown_minute">15</span><span
                      class="goods_countdown_text">:</span><span
                      class="goods_countdown_second">09</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="goods_info">
                <div class="goods_info_title" :style="`text-align:${data.blockStyle.textAlign};`">
                  <h3 v-if="data.blockStyle.showTitle" class="title" :style="`font-weight:${data.blockStyle.fontWeight};`"><span class="title_tag">减90.00元</span> {{ block.block_value.goods_name }}</h3>
                  <p v-if="data.blockStyle.showDes" class="goods_info_des">{{ block.block_value.goods_des }}</p>
                </div>
                <div class="goods_info_title_expand" :style="`text-align:${data.blockStyle.textAlign};`"><span>仅剩{{block.block_value.last_num}}件</span></div>
                <div class="goods_info_price">
                  <div class="price_info" :style="`font-weight:${data.blockStyle.fontWeight};`">
                    <span v-if="data.blockStyle.showPrice" class="sale_price">
                      <div class="sale_price_view" style="color: rgb(255, 68, 68);">
                        <span class="price_tag">¥</span>{{ block.block_value.goods_price | formatPrice }}
                      </div>
                    </span>
                  </div>
                  <div v-if="data.blockStyle.showBuyBtn" class="goods_buy_btn type-1"><i class="el-icon-shopping-cart-2" style="color: rgb(255, 68, 68);"></i></div>
                </div>
              </div>
            </div>
          </template>
        </layout-item>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from '../mixin'
  import request from '@/utils/request'
  import { api } from '~/ui-domain'

  const noImg = '';
  export default {
    name: 'tpl_67',
    mixins: [mixin],
    title: '秒杀',
    dataTpl: {
      tpl_id: 67,
      blockList: [
        {
          block_type: 'GOODS',
          block_value: {
            'goods_image': noImg,
            'goods_name': '此处显示商品名称，最多显示一行',
            'goods_des': '此处显示商品描述，最多显示一行',
            'last_num': 20,
            'goods_price': 9.9
          },
          block_opt: ''
        },
        {
          block_type: 'GOODS',
          block_value: {
            'goods_image': noImg,
            'goods_name': '此处显示商品名称',
            'goods_des': '此处显示商品描述，最多显示一行',
            'last_num': 20,
            'goods_price': 9.9
          },
          block_opt: ''
        },
        {
          block_type: 'GOODS',
          block_value: {
            'goods_image': noImg,
            'goods_name': '此处显示商品名称',
            'goods_des': '此处显示商品描述，最多显示一行',
            'last_num': 20,
            'goods_price': 9.9
          },
          block_opt: ''
        }
      ],
      blockClass: 'row_two', // row_one, row_two, row_three, row_list, row_hybrid
      blockStyle: {
        pagePadding: 15,
        proPadding: 10,
        proRadius: 4,
        imgPercent: 100,
        textAlign: 'left',
        backFill: 'cover',
        fontWeight: 'normal',
        showTitle: true,
        showDes: true,
        showPrice: true,
        showOldPrice: false,
        showBuyBtn: true
      }
    },
    filters: {
      formatPrice(price) {
        if (typeof price !== 'number') return price
        return String(Number(price).toFixed(2)).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      }
    },
    mounted () {
      this.getGoodsList();
    },
    methods: {
      async getGoodsList (_ids) {
        let _goodList = [];
        request({
          url: `${api.buyer}/pintuan/goods/skus/details`,
          method: 'post',
          loading: false,
          data: _ids,
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          let _base = this.MixinClone(this.data.blockList);
          console.log(res);
          // res.forEach((item, index) => {
          //   _base[index].block_value = {
          //     'id': item.coupon_id,
          //     'value': item.coupon_price,
          //     'tag': '元', // 当前只支持满减
          //     'term': item.title,
          //     'lastNum': item.create_num - item.received_num
          //   };
          // });
          // if (this.data.blockStyle.hideFinish) {
          //   _base = _base.filter(item => item.block_value.lastNum > 0)
          // }
          this.$nextTick(() => {
            this.data.blockList = _base;
            this.$forceUpdate();
          });
        });
      }
    },
    watch: {
      'data.blockList' (newVal, oldValue) {
        if (newVal) {
          let _list = newVal;
          let _ids = [];
          if (!_list[0].block_value.id) {
            return;
          }
          _list.forEach(item => {
            _ids.push(item.block_value.id);
          });
          this.getCouponList(_ids);
        }
      }
    }
  }
</script>